<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <!-- 
        基本概念：
            在大型项目中，会把重复内容分割成多个块，不两只页面中会包含相同的部分，
            可以把这些部分拆分成独立的组件进行于发，提高代码的复用性
        
        什么是组件？
            组件的概念：组件即自定义控件
            组件的用途：组件能够封装可重用代码，扩展HTML标签功能
            组件的本质：自定义标签

        组件分类：
            全局组件：不同作用域中都可以使用
            局部组件：只在定义当前组件的作用域中作用
        
        注意点：
            在所有实例中有效
            template中只有一个root根节点
            如果组件名为驼峰命名法：调用时使用-拆开调用
            组件内中的数据是心函数返回值的方式展示的
     -->
    <div id="box">
        <!-- 2.调用 -->
        <myheader></myheader>
        <my-header></my-header>
    </div>
    <div id="box2">
        <myheader></myheader>
    </div>
    <template id="t">
        <header>
            组件的头部 {{msg}}
            &copy; <a href="#" @click="fn()">百度</a>
        </header>
    </template>
    <script>
        //1.定义   自调用Vue.extend()
        //Vue.component('myheader',Vue.extend({template:"<div>组件</div>"}))
        //Vue.component('myheader',{template:"<header>头部组件</header>"})
        //如果命名为驼峰命名时，，在使用的时候需要-拼接
            Vue.component('myHeader',{template:'<h2>驼峰命名法</h2>'}) 
         
            Vue.component('myheader',{
                template:"#t",
                //组件内数据是以函数返回值的形式展示
                data(){
                    return{
                        msg:"Vue.js"
                    }
                },
                methods: {
                    fn(){
                        console.log("这是组件内的内容");
                    }
                },

            })
        var vm=new Vue({
            el:"#box",
            data:{},
        })
        var vm2=new Vue({
            el:'#box2',
            data:{}
        })
    </script>
</body>
</html>